导航栏列表项目使用悬停向右移动

时间：2015-08-17 01:08:42

标签： html css html5 navigation

我有一个导航栏，其中所有列表元素的填充为25像素。悬停时，背景颜色会在列表元素上发生变化，并添加5px的填充。但是，原始填充在悬停时会增加5px，因此填充会在悬停时合并为30px。

这会改变li元素，因为它们会超过这5个px。我希望li元素在悬停时保持静态，但在悬停时仍然会扩展填充。

我尝试过改变位置：绝对但是没有帮助。任何关于在添加'悬停填充'时删除额外填充的建议将不胜感激。

JS小提琴： http://jsfiddle.net/j77mqm6q/

HTML和CSS的现场演示： 

body {
    width: 100%;
    font-family: Geneva, sans-serif;
    font-size: 1em;
    background-image: url("subtle_white_feathers.png");
    text-align: justify;
}
/* NAVIGATION */

nav {
    font-size: 1.3em;
}
nav ul {
    list-style: none;
    padding-left: 0px;
}
nav ul li {
    display: inline;
    padding: 25px;
    position: relative;
}
nav ul li a {
    text-decoration: none;
}
nav ul li a:visited {
    color: #669966;
}
nav ul li a:hover {
    background-color: #669966;
    color: #ffffff;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
    transition: .25s linear;
    padding: 5px;
}
nav ul li a:active {
    background-color: #000000;
    padding: 10px;
    color: #ffffff;
}
/* DROPDOWN MENUS (ul > li > ul > li) */

ul li ul {
    position: absolute;
    left: 0;
    visibility: hidden;
    text-align: initial;
    font-color: #81B981;
}
ul li ul li {
    background: #444444;
    display: block;
    padding: 15px;
    width: 150px;
    border-bottom: 1px solid #ffffff;
    margin-left: 25px;
    width: 50;
    font-color: #FFFFFF;
}
ul li ul li:first-child {
    margin-top: 10px;
}
ul li ul li:last-child {
    border: none;
}
ul li ul li:hover {
    background: #6A6B6D;
}
ul li ul li a:hover {
    background-color: #6A6B6D;
}
ul li:hover ul {
    display: block;
    visibility: visible;
}
<body>
    <nav>
        <ul>
            <li><a href="">About</a>
                <ul>
                    <li><a href="">History</a></li>
                    <li><a href="">What You Need to Know</a></li>
                </ul>
            </li>
            <li><a href="">Getting Started</a>
                <ul>
                    <li><a href="">Tools</a></li>
                    <li><a href="">Background</a></li>
                </ul>
            </li>
            <li><a href="">Build</a>
                <ul>
                    <li><a href="">WP Theme Anatomy</a></li>
                    <li><a href="">Putting it Together</a></li>
                    <li><a href="">Files</a></li>
                    <li><a href="">Sharing Your Theme</a></li>
                </ul>
            </li>
            <li><a href="">Resources</a>
                <ul>
                    <li><a href="">Guides</a></li>
                    <li><a href="">Videos</a></li>
                </ul>
        </ul>
        </li>
    </nav>
    </div>
</body>

问题在哪里

nav ul li {
    display: inline;
    padding: 25px;
    position: relative;
}

nav ul li a:hover {
    background-color: #669966;
    color: #ffffff;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
    transition: .25s linear;    
    padding: 5px;
}

1 个答案:

答案 0 :(得分：0)

这是一个使用::before伪选择器和绝对定位来实现您正在寻找的效果而不会移动元素位置的示例：

现场演示：

＆＃13;
＆＃13; 
body {
    width: 100%;
    font-family: Geneva, sans-serif;
    font-size: 1em;
    background-image: url("subtle_white_feathers.png");
    text-align: justify;
}
/* NAVIGATION */

nav {
    font-size: 1.3em;
}
nav ul {
    list-style: none;
    padding-left: 0px;
}
nav ul li {
    display: inline;
    padding: 25px;
    position: relative;
}
nav ul li a {
    text-decoration: none;
    position: relative;
}
nav ul li a:visited {
    color: #669966;
}
nav ul li a:hover {
    color: #ffffff;
}
nav ul li a:hover::before {
    background-color: #669966;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
}
nav ul li a:active {
    background-color: #000000;
    padding: 10px;
    color: #ffffff;
}
nav ul li a::before {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
    transition: .25s linear;
}
/* DROPDOWN MENUS (ul > li > ul > li) */

ul li ul {
    position: absolute;
    left: 0;
    visibility: hidden;
    text-align: initial;
    font-color: #81B981;
}
ul li ul li {
    background: #444444;
    display: block;
    padding: 15px;
    width: 150px;
    border-bottom: 1px solid #ffffff;
    margin-left: 25px;
    width: 50;
    font-color: #FFFFFF;
}
ul li ul li:first-child {
    margin-top: 10px;
}
ul li ul li:last-child {
    border: none;
}
ul li ul li:hover {
    background: #6A6B6D;
}
ul li ul li a:hover {
    background-color: #6A6B6D;
}
ul li:hover ul {
    display: block;
    visibility: visible;
}
＆＃13; 
<nav>
    <ul>
        <li><a href="">About</a>
            <ul>
                <li><a href="">History</a></li>
                <li><a href="">What You Need to Know</a></li>
            </ul>
        </li>
        <li><a href="">Getting Started</a>
            <ul>
                <li><a href="">Tools</a></li>
                <li><a href="">Background</a></li>
            </ul>
        </li>
        <li><a href="">Build</a>
            <ul>
                <li><a href="">WP Theme Anatomy</a></li>
                <li><a href="">Putting it Together</a></li>
                <li><a href="">Files</a></li>
                <li><a href="">Sharing Your Theme</a></li>
            </ul>
        </li>
        <li><a href="">Resources</a>
            <ul>
                <li><a href="">Guides</a></li>
                <li><a href="">Videos</a></li>
            </ul>
    </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

JSFiddle版本：http://jsfiddle.net/j77mqm6q/1/

相关问题
最新问题