需要幫助，使子菜單horizontaly和子鏈接邊界不出去UL

HTML部分測試頭{ 溢出之外：汽車; }需要幫助，使子菜單horizontaly和子鏈接邊界不出去UL

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-部
< - JavaScript部分 - > $（ 'UL> li.toplevel'）懸停（函數（）{
$（'ul.submenu 」，這一點）.fadeIn（230）;
$（本）.find（ '一個：第一'）。addClass（「hoversub」）;} ，函數（）{
$（ 'ul.submenu' ，this）.fadeOut（230）; $（this）.find（'a：first'）。removeClass（「hover UB「）; } ）;

來源

2013-12-10 AlexRain

這裏有一個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; 
}

來源

2013-12-10 18:19:30 mdesdev

需要幫助，使子菜單horizo​​ntaly和子鏈接邊界不出去UL

回答

相關問題

需要幫助，使子菜單horizontaly和子鏈接邊界不出去UL