Question

菜单项在所有浏览器中都正确显示，但在safari中未显示（不可见）。当我把鼠标放在菜单上时，似乎菜单项就在那里并正确显示子菜单。请尽快修复此问题..........

HTML：

    <div class="sidemenu">
            <ul id="sidenav">
                 <li><a href="hi.html">Hi</a></li>
                 <li><a href="#">Know Us</a>
                         <ul>
                                <li><a href="process.html">Process</a></li>
                                <li><a href="#">Before We Start</a></li>           
                         </ul>
                 </li>
                 <li><a href="serve.html">We Serve</a>
                         <ul>
                                <li><a href="#">Websites</a></li>
                                <li><a href="#">Online Promotion</a></li>
                                <li><a href="#">Mobile Applications</a></li>
                                <li><a href="#">Software development</a></li>
                                <li><a href="#">Out Sourcing</a></li>
                         </ul>
                 </li>
                 <li><a href="work.html">Portfolio</a></li>
                 <li><a href="discuss.html">Let’s Discuss</a></li>
                 <li><a href="career.html">Join Us</a></li>
           </ul>

CSS：

       sidemenu{ 
        width:200px;
    height:auto;
    margin-top:150px;

}        

sidenav ul     {
 float: left;
 padding: 0;
 border-bottom: none;
 list-style: none; 
}
sidenav li {
 list-style:none;
 position: relative;
}

sidenav li a {
 padding: 1em 2em;
 text-decoration: none;
 color:#000000;
 float: left;
/* background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
 background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
 border-right: 1px solid #3c3c3c;
 border-left: 1px solid #292929;
 border-top: 1px solid #545454;*/
}
sidenav li a:hover {
 background: #6666CD;
 background: -moz-linear-gradient(top, #11032e, #6666CD);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
 border:2px solid #000000;
 border-radius:20px;
 color:#FFFFFF;
}
sidenav li ul {
 overflow:hidden;
 display: none;
 position: absolute;
 left: 130px;
 padding: 0; margin: 0;

}
sidenav li:hover > ul {
 display: block;
}
sidenav li ul li, #sidenav li ul li a {
 float: none;
}
sidenav li ul li {
 _display: inline; 
}
sidenav li ul li a {
 width: 120px;
 display: block;
}
sidenav li ul li ul {
 display: none;
}
sidenav li ul li:hover ul {
 left: 100%;
 top: 0;
}
sidenav li ul {  
}

Answer 1

在css中，.在类名之前编写，#在id之前编写。

你还没有在你的CSS中做过这个。

CSS：

.sidemenu {
    width:200px;
    height:auto;
    margin-top:150px;
}
#sidenav ul {
    float: left;
    padding: 0;
    border-bottom: none;
    list-style: none;
}
#sidenav li {
    list-style:none;
    position: relative;
}
#sidenav li a {
    padding: 1em 2em;
    text-decoration: none;
    color:#000000;
    float: left;        
}
#sidenav li a:hover {
    background: #6666CD;
    background: -moz-linear-gradient(top, #11032e, #6666CD);
    background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
    border:2px solid #000000;
    border-radius:20px;
    color:#FFFFFF;
}
#sidenav li ul {
    overflow:hidden;
    display: none;
    position: absolute;
    left: 130px;
    padding: 0;
    margin: 0;
}
#sidenav li:hover > ul {
    display: block;
}
#sidenav li ul li, #sidenav li ul li a {
    float: none;
}
#sidenav li ul li {
    display: inline;
}
#sidenav li ul li a {
    width: 120px;
    display: block;
}
#sidenav li ul li ul {
    display: none;
}
#sidenav li ul li:hover ul {
    left: 100%;
    top: 0;
}
#sidenav li ul {
}

DEMO here.

Answer 2

你走了。

<强> WORKING DEMO

CSS更改：

#sidenav li {
    list-style:none;
    position: relative;
    display:block;
}

这适用于Safari。希望这会有所帮助。

导航菜单项未显示在safari中，但在鼠标悬停在菜单上时正确显示子菜单

2 个答案: