我创建的下拉菜单有一些 CSS 问题

Question

我觉得这些都是非常简单的问题，但是我是编码新手，不知道如何解决它们。任何帮助将不胜感激。

首先，超链接文本是当前下拉菜单中唯一可点击的部分。我希望能够单击文本所在的菜单的整个部分，即由 1px 边框分隔的各个部分。当光标悬停在它们上方时，我还希望这些部分改变颜色，但如果我想实现这一点，我不确定要更改 css 的哪个部分。

其次，在我的主菜单链接之间创建空间的填充包含在链接悬停功能中。当我将鼠标悬停在它们左侧的空白处时，有没有办法隔开不会导致子页面下拉的链接？ （这似乎与我的第一个问题相反）

最后，我编写的部分 css 使任何被点击的父菜单链接在查看者在该页面上时保持紫色突出显示。这是故意的，但是现在我在下拉菜单中有子页面，当单击父页面时，它们也都保持该颜色。有没有办法解决这个问题？如果在查看者位于特定子页面上时父链接和特定子链接都保持紫色突出显示，那将是理想的。

网站链接是 www.lucieaverill.co.uk

代码如下：

HTML：

<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>

CSS：

/* header navigation menu */

.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none; 
}

.header nav ul li {
float:left;
padding-left:50px;
padding-bottom:20px;
}

.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}

/*  dropdown menu */
.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
width: 200px;
}

.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}

.header ul li ul li a {
font-size:11px;}

/* end dropdown menu */

/* end header navigation menu */

更新！ ------------------------------

我想我已经根据人们对标签的看法取得了一些进展。我已经设法达到悬停效果改变标签颜色的地步，但是填充有点偏离，我不知道为什么。我尝试将 padding-right 值设置为“auto”，因为我认为它不能具有特定值，因为每个链接的长度都不同。 显然，我希望填充扩展到右侧菜单的最末端，但我无法做到这一点。

每个链接的颜色和菜单的最底部似乎也有一些奇怪的间距。

我很惊讶地看到颜色之间的过渡是平滑而渐进的。我认为我没有任何 css 可以让它像这样运行。有没有办法让它更即时？

网页链接又是 www.lucieaverill.co.uk

/*  dropdown menu */
.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
width: 200px;
}

.header ul li ul li {
margin-left:0px;
float:none;
}

.header ul li ul li a {
background-color:#FF3F55;
padding-left:10px;
padding-right:auto;
padding-top: 12px;
padding-bottom: 12px;
font-size:11px;
border-bottom: 1px solid #ededed;
}

.header ul li ul li:hover a {
background-color:#ededed; }

/* end dropdown menu */

Answer 1

见fiddle：

删除li 的填充并将所需的填充添加到a 标记。 可点击问题将得到修复。

/* header navigation menu */

.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none; 
}

.header nav ul li {
float:left;
padding:0px;
}

.header nav ul li a{
padding:20px 25px;
}

.header nav ul li a:hover {
    color:white;
    background:black;
}



.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}

/*  dropdown menu */
.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
width: 200px;
}

.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}

.header ul li ul li a {
font-size:11px;}

/* end dropdown menu */

/* end header navigation menu */

<div class="header">
    <nav class="site-nav">
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
                <li><a href="#">submenu</a>
                <ul>
                    <li><a href="#">submenu1</a></li>
                    <li><a href="#">submenu2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>