需要帮助使子菜单水平化，并且子链接的边框不会超出 ul答案

【问题标题】：Need help to make sub-menu horizontaly and borders of sub-links don't go out outside of ul需要帮助使子菜单水平化，并且子链接的边框不会超出 ul
【发布时间】：2026-01-23 18:40:01
【问题描述】：

html部分测试标题{ 溢出：自动； }

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width:300px;
}

ul li {
    float:left;
    margin:0 4px 0 0;
    font-size:15px;
}

ul li a {
    color:#0076d1;
    height:20px;
    text-decoration:none;
    display:block;
    background:white;
    padding:6px 10px 8px 10px;
    border-left:1px solid #FFFFFF;
    border-right:1px solid #FFFFFF;
    border-top:1px solid #FFFFFF;
    transition: border-color 0.23s linear;
}

ul li a:hover {
    color:#232628;
}

ul li.toplevel a:hover, ul li.toplevel a.hoversub {
    color:##232628;
    height:19px;
    border-left:1px solid #d3d3d3;
    border-right:1px solid #d3d3d3;
    border-top:1px solid #d3d3d3;
    background:white;
    padding-bottom:9px;
    border-color:#d3d3d3
}
ul .submenu:before {
    background-color: #d3d3d3;
    content: "";
    height: 1px;
    left: 71px;
    position: absolute;
    top: 0;
    width: 120px;
}
ul.submenu {
    position:absolute;
    list-style-type:none;
    width:187px;
    margin:0 0 0 0;
    padding:0;
    display:none;
    z-index:999999;
    background:#FFFFFF;
    /*border-top:1px solid #d3d3d3;*/
    border-left:1px solid #d3d3d3;
    border-right:1px solid #d3d3d3;
    border-bottom:1px solid #d3d3d3;
    }

ul.submenu li.sublist {
    clear:left;
    margin:0;
    padding:0;
    width:187px;
    height:30px;
    padding:5px;
    margin-bottom:2px;
    font-size:17px;
    }

ul li.sublist a {
    border:none;
    background:none;
}

ul li.sublist a:hover {
    border:none;
    background:none;
    color:#FF0000;
}
</style>
</head>
<body>
<div id="mainContent">
<header>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li >
<li class="toplevel">
<a href="events">Programm</a>
<ul class="submenu">
<li class="sublist"><a href="">Weather</a></li>
    <li class="sublist"><a href="">all</a></li>
    <li class="sublist"><a href="">a</a></li>
    <li class="sublist"><a href="">Economy</a></li>
</ul>
</li>
</header>

js部分
$('ul > li.toplevel').hover( 函数 () {
$('ul.submenu', this).fadeIn(230);
$(this).find('a:first').addClass("hoversub"); }, 函数 () {
$('ul.submenu', this).fadeOut(230); $(this).find('a:first').removeClass("hoversub"); } );

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是一个FIDDLE

取决于您的font-family 和font-size，您必须更改下面代码中的width 和left 位置。

ul .submenu:before {
  background-color: #d3d3d3;
  content: "";
  width: 105px;  /* If border is too wide reduce the width */
  height: 1px;
  top: 0;
  left: 82px;    /* Also change left distance till you achieve desired look */
  position: absolute;
}

【讨论】：