# Help form css master

**URL:** <https://forum.kirupa.com/t/help-form-css-master/281031>\
**Category:** Uncategorized\
**Created:** [February 4, 2009, 5:27am UTC](https://forum.kirupa.com/t/help-form-css-master/281031 "2009-02-04T05:27:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daimz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/daimz/32/2383_2.png) [@Daimz](https://forum.kirupa.com/u/Daimz)\
**Post date:** [February 4, 2009, 5:27am UTC](https://forum.kirupa.com/t/help-form-css-master/281031/1 "2009-02-04T05:27:35Z")

</div>

I have hit a bit of a bump. I am wanting to know if it is posible to control the background of a span tag when a list item is rolled over. The catch is that the span tag is not in side the list item but rather next to it. Like so:

```auto
<ul class="nav">
<div>
<li class="home"><a href="">Menu 1<span></span></a></li><span class="s1"></span>

<li class="blog"><a href="">Menu 1<span></span></a></li><span class="s2"></span>

</div>
</ul>

```

“s1” is what I am wanting to change. basically to give a bit more info I am wanting to make a nav system where when I rollover “home” the first changes it’s background and so does the “s1” . But when you rollover blog it does the same but again changes the “s1” to a different background image. I understand that this is a some what laborious way of making a nav menu but I want it to look like the attached image.

So far the css I have is:

```auto

.nav {
	list-style-type: none;
        margin:0;
        padding:0;
        position: absolute; 
        top: 2em; /* Menu position that can be changed at will */
        left: 3em;
}
.nav li {
	float: left;
}
.home a { /* definition for each button in the menu */
	width: 122px; /* button width that can be changed at will */
	height: 23px;
	float: left;
	display: block;
	text-align: center;
	border: 1px solid #fff;
	text-decoration: none;
	color: #000;
	background-image: url(images/nav.png);
	background-repeat: no-repeat;
	background-position: left;
}
.home a span {
	display: none;
}

.blog a { /* definition for each button in the menu */
	width: 122px; /* button width that can be changed at will */
	height: 23px;
	float: left;
	display: block;
	text-align: center;
	border: 1px solid #fff;
	text-decoration: none;
	color: #000;
	background-image: url(images/nav.png);
	background-repeat: no-repeat;
	background-position: left;
}
.blog a span {
	display: none;
}
.nav div .s1 {
}

```

Cheers would love any help.