CSS子菜单点击问题

时间:2015-04-15 06:50:54

标签: html css

我正在开发一个网站 在菜单部分,我添加了一个子菜单 在子菜单上的“产品”下,我无法点击“空气源热泵”。

任何人都可以帮助我吗?

这是我的网站:http://develop.com.sg/Enerprof/

3 个答案:

答案 0 :(得分:0)

这是因为你在悬停IVolt时有一个悬停动作...... 当你克服它时,另一个子菜单出现在IVolt和空气源热泵之间。 当这个子菜单“退出”时,IVolt菜单消失,Air Source选项返回其初始位置。此时,您的光标位于您要访问的“产品”菜单中<...

如果你想改变“no”代码,(如果你的Air Source选项不是像IVolt那样的子菜单......),你只需将它放在Products菜单的第一个位置...... 顺便说一下,我们需要一些代码来帮助你...

答案 1 :(得分:-1)

您在子节点中提供悬停效果。所以当你悬停你的鼠标控制时,他会关闭你的子菜单。改变css效应。

答案 2 :(得分:-1)

<ul>
    <li><a href="product.php?cid=8">Spices</a>
        <ul>
            <li><a href="product-detail.php?pid=33">Ajwain Seed</a></li>
            <li><a href="product-detail.php?pid=34">Cardmom</a></li>
            <li><a href="product-detail.php?pid=35">Coriander</a></li>
            <li><a href="product-detail.php?pid=36">Cumin Seed</a></li>
            <li><a href="product-detail.php?pid=37">Dill Seed</a></li>
            <li><a href="product-detail.php?pid=38">Fennel Seed</a></li>
            <li><a href="product-detail.php?pid=39">Fenugreek</a></li>
            <li><a href="product-detail.php?pid=40">Red Chilli</a></li>
            <li><a href="product-detail.php?pid=41">Turmeric</a></li>
        </ul>
    </li>
    <li><a href="product.php?cid=9">Pulses</a>
        <ul>
            <li><a href="product-detail.php?pid=30">Red Lentils</a></li>
            <li><a href="product-detail.php?pid=31">Green Peas</a></li>
            <li><a href="product-detail.php?pid=32">Cheak Peas</a></li>
        </ul>
    </li>
    <li><a href="product.php?cid=11">Oil Seeds</a>
        <ul>
            <li><a href="product-detail.php?pid=26">Sesame seed</a></li>
            <li><a href="product-detail.php?pid=27">Rapeseeds</a></li>
            <li><a href="product-detail.php?pid=28">Niger Seed</a></li>
            <li><a href="product-detail.php?pid=29">Groundnut</a></li>
        </ul>
    </li>
    <li><a href="product.php?cid=12">Grains</a>
        <ul>
            <li><a href="product-detail.php?pid=22">Maize</a></li>
            <li><a href="product-detail.php?pid=23">Wheat</a></li>
            <li><a href="product-detail.php?pid=24">Rice</a></li>
            <li><a href="product-detail.php?pid=25">Millet</a></li>
        </ul>
    </li>
    <li><a href="product.php?cid=13">Cotton</a>
        <ul>
            <li><a href="product-detail.php?pid=20">Raw Cotton</a></li>
            <li><a href="product-detail.php?pid=21">Cotton Linter</a></li>
        </ul>
    </li>
    <li><a href="product.php?cid=14">Animal Feed Products</a>
        <ul>
            <li><a href="product-detail.php?pid=17">houss.php</a></li>
            <li><a href="product-detail.php?pid=18">Rape Seed Meal</a></li>
            <li><a href="product-detail.php?pid=19">Soyabean Meal</a></li>
        </ul>
    </li>
</ul>

CSS:

.content2{width:883px; margin-top:5px; height:auto; margin:auto;}
.gallery-left{width:630px; height:323px; border:8px solid #f5f4f2; float:left;}
.prod-menu-right{width:210px; height:323px; border:8px solid #f5f4f2; float:right; background:url(../images/prod-menu-bg.png) repeat-x #74c305;}
.prod-menu-right h1{font-size:21px; color:white; text-align:center; margin-top:0px;  font-family:"Times New Roman", Times, serif;}
.prod-menu-right ul{list-style:url(../images/arrow.png);  margin:0px 25px 0px 25px; padding:0; font-size:12px;}
.prod-menu-right li{ height:25px; line-height:14px; padding-top:10px}
.prod-menu-right ul li a{color:#FFF; line-height:14px ;text-decoration:none;}
.prod-menu-right ul li a:hover{color:#333; text-decoration:underline}
.prod-menu-right li:hover{position:relative;z-index:1000;  }
.prod-menu-right li:hover ul{margin-left:0px; margin-top:1px; text-align:left;  width:180px;}
.prod-menu-right li:hover ul li{min-width:180px; position:relative;}
.prod-menu-right li:hover ul li a{border-bottom: 1px dotted; padding:10px 25px; color: #FFFFFF; display:block; font-size: 12px; line-height:14px; text-decoration:none; background-color:#669933;}
.prod-menu-right li:hover ul li a:hover {text-decoration:none; color:#fff; line-height:14px;  background-color:#333; position:relative;}
.prod-menu-right ul li ul li { position:relative; display:inline-block;}
.prod-menu-right ul li ul li a{ display:none;}

添加<ul><li>代码并使用此css简单地实现菜单...与您的网站..