Question

我有PHP，HTML和CSS的导航菜单但是下拉代码存在一些问题菜单位于顶部并具有子项目，并在悬停时显示子菜单但是，当我悬停子菜单项目出现在左下角的底部时看起来很糟糕。如何在此代码中添加下拉列表？

HTML CODE

<div class="header">
<div class="logo"><a href="index.php"><img src="images/logo_chrome.gif" alt="Logo Chrome" /></a></div>
<div class="navi">

<ul>
<li><?PHP if($pagename == "index"){ ?><a href="index.php" class="home active"> </a><?PHP }else {?> <a href="index.php" class="home"> </a> <?PHP } ?></li>

<li><?PHP if($pagename == "service"){ ?><a href="service.php" class="service active"> </a><?PHP }else {?> <a href="service.php" class="service"> </a> <?PHP } ?>

<ul>


       <li>         <a href="#">Service one</a>       </li>    
          <li>      <a href="#">Service three</a></li>
             <li>    <a href="#">Service four</a></li>
   </ul>                     



</li>
<li><?PHP if($pagename == "contacts"){ ?><a href="contacts.php" class="contacts active"> </a><?PHP }else {?> <a href="contacts.php" class="contacts"> </a> <?PHP } ?></li>
</ul>
</div>
</div>

// CSS

body img{ margin:0; padding:0; border:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#737373; }
UL, OL { margin:0; padding:0; list-style: none;}
li { margin:0; padding:0; list-style-type:none;}

A { color:#00558e; text-decoration:none; border: none;}
/*A:visited{ text-decoration:none; color:#;}*/
A:hover {color:#9ed101; text-decoration:none; outline:none; border:0;}
/*A:active { text-decoration:none; color:#;}*/
A:focus {outline:none;}
.clr {clear: both;}
/*LAYOUT*/
#wrap{ margin:0 auto; padding:0; width:996px;}
.header{ margin:0; padding:0px 10px 0 10px; width:976px; height:92px; float:left; }
.logo{ margin:0; padding:0; width:152px; height:89px; float:left; border-bottom:red 0px solid;}
.navi{ margin:0; padding:15px 0 0 0;  width:712px; height:71px; float:right; }
.navi ul{ margin:0; padding:0; width:712px; float:left;}
.navi ul li{ margin:0; padding:0; display:block; float:left;}
.navi ul li a.home{ margin:0; padding:0; display:block; float:left; width:50px; height:56px; background:url(../images/home.gif) no-repeat top;}
.navi ul li a.home:hover{ margin:0; padding:0; display:block; float:left; width:50px; height:56px; background-position:bottom;}
.navi ul li a.home.active{ margin:0; padding:0; display:block; float:left; width:50px; height:56px; background-position:bottom;}






/*Custom CSS for Sub Menu*/
nav ul li > ul:before {
    content: "";
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent #2C3E50 transparent;
    width: 0;
    height: 0;
    position: absolute;
    left: 15px;
    top: 5px;
}

nav ul li > ul { position: absolute; left: 14px; top: 80%; padding-top: 13px; background: none; width: 150px; z-index: -9999; opacity: 0; -webkit-transition: 0.3s ease-out; }
nav ul li:hover > ul { display: block; z-index: 100; opacity: 1; top: 95%; }

nav ul li > ul li:first-child { border-radius: 4px 4px 0 0; padding-top: 3px; }
nav ul li > ul li:last-child { border-radius: 0 0 4px 4px; }
nav ul li > ul li { padding: 0 3px 3px; background: #2C3E50; width: 100%; }
nav ul li > ul li a .service{ display: block; padding: 6px 9px; border-radius: 2px; font-size: 14px; }
nav ul li > ul li:hover > a { color: #FFF; background: #3498DB; }
nav ul li > ul li.active > a { color: #FFF; background: #2980B9; }



/* SUB SUB MENU */
nav ul li > ul li > ul:before {
    content: "";
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent #2C3E50 transparent;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 15px;
    -webkit-transform: rotate(270deg);
}

nav ul li > ul li > ul { top: 0; left: 90%; padding: 0; padding-left: 13px; -webkit-transition: 0.3s ease-out; }
nav ul li > ul li:hover > ul { display: block; opacity: 1; z-index: 100; top: 0; left: 100%; }

Answer 1

在你的css中试试这个

.navi ul li{
    margin:0;
    padding:0;
    display:block;
    float:left;
    position:relative;
}

悬停时左下角出现Css导航下拉列表

1 个答案: