好的,简单地说,我最近在我的某个导航链接中添加了一个下拉菜单,您单击导航选项并且菜单丢失,没有任何问题,但是当您在移动设备上查看该网站时虽然有菜单选项,但标题不是..
我的常规导航菜单如下:
主页关于产品 金条联系
产品 是下拉部分。
这是我目前在移动菜单中获得的内容,
首页
关于
首页1
首页2
首页3
首页4
金条
联系人
这就是我希望它看起来像什么
首页
关于
产品
首页1 首页2
首页3
首页4
金条
联系人
你和我在一起吗?我希望如此,
现在这里是导航菜单的移动css;
/* Mobile UI */
#mobileUI-site-titlebar {
background: url('images/headerM.png') 0px -35px;
box-shadow: inset 0px 15px 30px 0px rgba(255,255,255,0.1);
}
#mobileUI-site-title {
color: #fff;
text-shadow: -1px -1px 1px rgba(0,0,0,1);
line-height: 51px;
font-size: 1.5em;
}
#mobileUI-site-nav-opener {
width: 50px;
background: url('images/mobileUI-site-nav-opener-bg.svg')
center center no-repeat;
text-indent: -9999em;
height: 50px;
opacity: 0.5;
}
#mobileUI-site-nav-opener:active {
opacity: 1.0;
}
#mobileUI-site-nav {
background: #1e1e1e top left repeat-x;
box-shadow: inset -5px 0px 60px 0px rgba(0,0,0,0.25);
}
#mobileUI-site-nav-inner {
padding: 1em 0 1em 0;
}
.mobileUI-site-nav-link {
text-shadow: -1px -1px 0 rgba(0,0,0,0.25);
color: #fff;
text-decoration: none;
font-size: 1.4em;
padding: 0.5em 1em 0.5em 1em;
}
这是导航菜单的html ..
<nav class="mobileUI-site-nav" id="site-nav">
<ul>
<li><a href="#">Homepage</a>
</li>
<li><a href="#">About Us</a>
</li>
<li class="headLink">Products
<ul id"cssdropdown">
<li><a href="#">Home1</a>
</li>
<li><a href="#">Home4</a>
</li>
<li><a href="#">Home2</a>
</li>
<li><a href="#">Home3</a>
</li>
<li><a href="#">Home5</a>
</li>
</ul>
</li>
<li><a href="#">Bullion</a>
</li>
<li class="current_page_item"><a href="#">Contact Us</a>
</li>
</ul>
</nav>
希望这会让它更清晰..这是我的桌面导航..
这是移动导航..
我知道对齐已经结束,但是现在我只想修复移动元素..
基本上,我希望标题 产品 出现在手机导航菜单中。我以为它会自动存在,但我显然做错了。
将不胜感激地收到任何帮助!
利
答案 0 :(得分:0)
从您的代码中我只能知道您希望#cssdropdown在左侧...只需将此css代码添加到您的CSS ...
<强> CSS: - 强>
#cssdropdown { margin-left:5px; } //Increase it as your wish